<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios实现文章搜索</title>
    <script src="./js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="data.type">
            <option value="0">请选择</option>
            <option value="1">ID</option>
            <option value="2">标题</option>
        </select>
        <input type="text" v-model="data.content" />
        <button @click="search">搜索</button>

        <ul>
            <li v-for="(val, idx) in data.list">
                {{val}}
            </li>
        </ul>
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'

        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                const data = reactive({
                    type: "0",
                    content: "",
                    list: []
                })

                const search = ()=>{
                    console.log("搜索类型：", data.type, "，搜索内容：", data.content);
                    data.list = []
                    if (data.type === "1") {
                        // get
                        axios.get(`http://127.0.0.1:9090/bm-app/d/t14/${data.content}`).then(res=>{
                            if (res.data.success == true) {
                                for (let i = 0; i < res.data.data.length; i++) {
                                    data.list.push(res.data.data[i])
                                }
                            } else {
                                console.log(res.data);
                            }
                        }).catch(err=>{
                            console.log("get.error", err);
                        }).finally(()=>{
                            console.log("get finally");
                        })
                    } else if (data.type === "2") {
                        let param = {
                            "content": data.content
                        }
                        // post
                        axios.post("http://127.0.0.1:9090/bm-app/d/t15", param, {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                        }).then(res=>{
                            if (res.data.success == true) {
                                for (let i = 0; i < res.data.data.length; i++) {
                                    data.list.push(res.data.data[i])
                                }
                            } else {
                                console.log(res.data);
                            }
                        }).catch(err=>{
                            console.log("post.error", err);
                        }).finally(()=>{
                            console.log("post finally");
                        })
                    }
                }

                return {
                    data,
                    search
                }
            }
        }).mount("#app")
    </script>
</body>
</html>